{% extends "base.html" %}

{% block title %}重置密码{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center min-vh-100">
    <div class="col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header text-center" style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: white;">
                <h4 class="mb-0">重置密码</h4>
            </div>
            <div class="card-body p-5">
                <form method="POST" class="needs-validation" novalidate>
                    <div class="mb-4">
                        <label for="email" class="form-label h6">邮箱</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                            <input type="email" class="form-control" id="email" name="email" required>
                            <button type="button" class="btn btn-outline-primary" name="send_code">
                                发送验证码
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="verify_code" class="form-label h6">验证码</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-shield-lock-fill"></i></span>
                            <input type="text" class="form-control" id="verify_code" name="verify_code" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="new_password" class="form-label h6">新密码</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                            <input type="password" class="form-control" id="new_password" name="new_password" required>
                        </div>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-lg text-white" 
                                style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);">
                            重置密码
                        </button>
                    </div>
                </form>
                <div class="mt-4 text-center">
                    <p class="mb-0 fs-6">
                        <a href="{{ url_for('login') }}" style="color: #43cea2; text-decoration: none;">
                            返回登录
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let countdown = 0;
const countdownBtn = document.querySelector('button[name="send_code"]');

// 发送验证码
async function sendVerificationCode() {
    const emailInput = document.getElementById('email');
    const email = emailInput.value.trim();
    
    if (!email) {
        alert('请输入邮箱地址');
        return;
    }
    
    if (!isValidEmail(email)) {
        alert('请输入有效的邮箱地址');
        return;
    }

    try {
        const response = await fetch('/send_code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `email=${encodeURIComponent(email)}`
        });
        
        const data = await response.json();
        
        if (data.success) {
            startCountdown();
            alert(data.message);
        } else {
            alert(data.message);
        }
    } catch (error) {
        alert('发送验证码失败，请稍后重试');
    }
}

// 验证邮箱格式
function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// 倒计时功能
function startCountdown() {
    countdown = 60;
    countdownBtn.disabled = true;
    
    const timer = setInterval(() => {
        countdown--;
        countdownBtn.textContent = `重新发送(${countdown}s)`;
        
        if (countdown <= 0) {
            clearInterval(timer);
            countdownBtn.disabled = false;
            countdownBtn.textContent = '发送验证码';
        }
    }, 1000);
}

// 绑定发送验证码按钮点击事件
countdownBtn.addEventListener('click', function(e) {
    e.preventDefault();
    if (!this.disabled) {
        sendVerificationCode();
    }
});
</script>
{% endblock %} 